<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns='http://www.w3.org/1999/xhtml'
        xmlns:v='urn:schemas-microsoft-com:vml'>

<head>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
    <meta http-equiv='cache-control' content='no-cache'/>
    <meta http-equiv='expires' content='0'/>
    <meta name='copyright' content='Copyright (C) XXX Consultants'/>
    <meta name='robots' content='none'/>


    <link rel="stylesheet" href="/gts/css/main.css"/>

    <link rel="shortcut icon" href="/gts/images/favicon.ico"
            type="image/x-icon"/>

    <title>XXX Tracking System</title>

    <script
            src='http://ditu.google.com/maps?file=api&v=2&key=*** Place Google Maps Key Here *'
            type="text/javascript">
    </script>

    <script type="text/javascript">
    //<![CDATA[
    var map;
    // TextualZoomControl 是显示文本“放大”和“缩小”的
    // 按钮（而不是显示 Google 地图中的图标按钮）的 GControl。

    // 我们先定义函数
    function TextualZoomControl() {
    }

    // 要建立 GControl 的子类，我们将prototype对象设置为
    // GControl 对象的一个实例
    TextualZoomControl.prototype = new GControl();

    // 为每个按钮创建一个 DIV，并将其放在容器 DIV 中，
    // 然后返回容器 DIV 作为我们的控件元素。将该控件添加到
    // 地图容器中，并将其返回，以便地图类能正确地放置它。
    TextualZoomControl.prototype.initialize = function(map) {
    var container = document.createElement("div");

    /*
    var zoomInDiv = document.createElement("div");
    this.setButtonStyle_(zoomInDiv);
    container.appendChild(zoomInDiv);
    zoomInDiv.appendChild(document.createTextNode("放大"));
    GEvent.addDomListener(zoomInDiv, "click", function() {
      map.zoomIn();
    });
  
    var zoomOutDiv = document.createElement("div");
    this.setButtonStyle_(zoomOutDiv);
    container.appendChild(zoomOutDiv);
    zoomOutDiv.appendChild(document.createTextNode("缩小"));
    GEvent.addDomListener(zoomOutDiv, "click", function() {
      map.zoomOut();
    });*/


    var speedDiv = document.createElement("div");
    this.setButtonStyle_(speedDiv);

    container.appendChild(speedDiv);
    var icons = document.createElement("div");
    icons.innerHTML = "速度(公里/小时):<br/> <span style='background-color:red;width=10px'>&nbsp;&nbsp;&nbsp;&nbsp;</span>30 <span style='background-color:green;width=10px'>&nbsp;&nbsp;&nbsp;&nbsp;</span>60 <span style='background-color:blue;width=10px'>&nbsp;&nbsp;&nbsp;&nbsp;</span><hr>"
    //+"<span >0   </span> <span >25</span> <span >50</span>";
    speedDiv.appendChild(icons);




    map.getContainer().appendChild(container);
    return container;
    }

    // 默认情况下，该控件将在地图的左上角显示，边距为 7 像素。
    TextualZoomControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 28));
    }

    // 设置给定按钮元素的正确 CSS。
    TextualZoomControl.prototype.setButtonStyle_ = function(button) {
    button.style.textDecoration = "underline";
    button.style.color = "#0000cc";
    button.style.backgroundColor = "white";
    button.style.font = "small Arial";
    button.style.border = "1px solid black";
    button.style.padding = "2px";
    button.style.marginBottom = "3px";
    button.style.textAlign = "center";
    button.style.width = "12em";
    button.style.cursor = "pointer";
    }




    var colors = ["#FF0000","#00FF00","#0000FF"];

    var phy;

    function makePoly(phyPoints){
    var phylineGlatLngs = [];
    var phystartGlatLon = [];
    var phyend = null;
    var phycount = 0;
    var result = [];

    for(var phyIndex=0; phyIndex<phyPoints.length;  phyIndex++){
    var phypoint = phyPoints[phyIndex];
    if (phycount > 0 && phylineGlatLngs.length == 0) {
    phylineGlatLngs.push(phystartGlatLon);
    }
    var phygp = new GLatLng(phypoint[0], phypoint[1]);
    phylineGlatLngs.push(phygp);
    if ((phyIndex + 1) % 5 == 0) {
    phycount++;
    var phypolyline = new GPolyline(phylineGlatLngs, colors[phycount % 3], 5, 0.8);
    map.addOverlay(phypolyline);
    result.push(phypolyline);
    bindEvent(phypolyline);
    phystartGlatLon = phygp;
    phylineGlatLngs = [];
    }
    }

    return result;
    }


    function load() {
    if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map"));
    // map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GLargeMapControl());
    map.addMapType(G_PHYSICAL_MAP);
    map.addControl(new TextualZoomControl());
    map.setCenter(new GLatLng(41.7, 123.44), 8);

    GEvent.addListener(map, 'zoomend', function(oldLevel,newLevel){
    document.getElementById("out").innerHTML = "oldLevel="+oldLevel+" , newLevel="+newLevel;
    if(newLevel>=11){
    if(phy!=null){

    }else{
    //alert("add map  for >11 and null");
    phy = [];
    var phyPoints = [
    [41.506070528965,122.785263061523],
    [41.491927965784,122.782859802246],
    [41.479325626388,122.779769897461],
    [41.468264411334,122.778396606445],
    [41.459259703348,122.777366638184],
    [41.453341642959,122.779083251953],
    [41.445364272424,122.780799865723],
    [41.438415440809,122.785263061523],
    [41.421941164075,122.782859802246],
    [41.416792095276,122.782516479492],
    [41.405977722015,122.78491973877],
    [41.39696436913,122.787322998047],
    [41.387434608217,122.790412902832],
    [41.384858757352,122.824058532715],
    [41.369659160192,122.829208374023],
    [41.363217581523,122.850494384766],
    [41.353167445424,122.864227294922],
    [41.346466492542,122.874183654785],
    [41.346981974942,122.88516998291],
    [41.340280385416,122.901649475098],
    [41.341826967291,122.923965454102],
    [41.337444889921,122.946968078613],
    [41.340280385416,122.983016967773],
    [41.342600244455,123.003959655762],
    [41.343889019323,123.021812438965],
    [41.335382633843,123.036575317383],
    [41.324296888776,123.050308227539],
    [41.319140085574,123.061981201172],
    [41.313209257435,123.076400756836],
    [41.308309470644,123.092880249023],
    [41.30134598226,123.110046386719],
    [41.293865851639,123.129615783691],
    [41.287932724277,123.141632080078],
    [41.283031038174,123.154335021973],
    [41.275548807386,123.161201477051],
    ];

    phy = makePoly(phyPoints);
    for(var ppi=0;ppi<phy.length;ppi++){
    map.addOverlay(phy[ppi]);
    }




    }
    }else{
    if(phy!=null){
    //alert("remove map  for <11 and not null");
    for(var ppi=0;ppi<phy.length;ppi++){
    map.removeOverlay(phy[ppi]);
    }
    phy = null;
    }else{
    //alert("nothing  for <11 and null");
    //do nothing
    }

    }
    });


    var mpoints = [
    [41.566963996119,123.321533203125],
    [41.01389481671,122.9150390625 ],
    [41.490989298309,123.30230712890],
    [41.337535105841,123.15261840820],
    [40.926431854339,122.69599914550],
    [40.428080641846,122.30941772460],
    [39.137996150141,121.70242309570],
    [41.586585635001,123.31466674804]
    ];

    var points = [
    [41.705625982882,123.31466674804],
    [41.658446643849,123.31741333007],
    [41.623552727551,123.31329345703],
    [41.586585635001,123.31466674804],
    [41.550625102238,123.32839965820],
    [41.525954883237,123.33389282226],
    [41.50950284268,123.32153320312],
    [41.490989298309,123.30230712890],
    [41.453946332832,123.30230712890],
    [41.428209597967,123.28445434570],
    [41.400402460635,123.25698852539],
    [41.381857756117,123.22677612304],
    [41.361246324732,123.18283081054],
    [41.337535105841,123.15261840820],
    [41.313815251809,123.12103271484],
    [41.298341130026,123.07159423828],
    [41.269446277877,123.04412841796],
    [41.2487992648,123.02078247070],
    [41.230779417441,122.99468994140],
    [41.211153300172,122.96653747558],
    [41.195138158287,122.94250488281],
    [41.180152703304,122.92053222656],
    [41.164129976194,122.89649963378],
    [41.137244344247,122.87658691406],
    [41.108278257621,122.84088134765],
    [41.085510221059,122.82028198242],
    [41.051343370219,122.79830932617],
    [41.040468376447,122.78800964355],
    [41.006278125079,122.7770233154],
    [40.973625419109,122.75299072265],
    [40.945105868649,122.72277832031],
    [40.926431854339,122.69599914550],
    [40.874012692757,122.64656066894],
    [40.853241145514,122.64106750488],
    [40.845450135797,122.63282775878],
    [40.826228395345,122.6136016845],
    [40.804922119605,122.59094238281],
    [40.771129855277,122.57034301757],
    [40.748765522666,122.55043029785],
    [40.725352931465,122.53326416015],
    [40.710260451315,122.49961853027],
    [40.676420049965,122.46116638183],
    [40.656628470052,122.44468688964],
    [40.6144215536,122.43026733398],
    [40.563320730134,122.40692138671],
    [40.538799339466,122.40280151367],
    [40.517401006391,122.38357543945],
    [40.499128731288,122.36846923828],
    [40.491296232296,122.35610961914],
    [40.472494504401,122.34169006347],
    [40.462046824598,122.32521057128],
    [40.445849709181,122.3155975341],
    [40.428080641846,122.30941772460],
    [40.414489363011,122.29293823242],
    [40.409784049815,122.27989196777],
    [40.379453028718,122.27302551269],
    [40.342828430629,122.2496795654],
    [40.317702921748,122.22221374511],
    [40.289949306832,122.20367431640],
    [40.27004347052,122.18719482421],
    [40.25799235409,122.16590881347],
    [40.235980428203,122.15286254882],
    [40.215010034627,122.11921691894],
    [40.197704572998,122.10411071777],
    [40.160981393883,122.09037780761],
    [40.146811427643,122.07115173339],
    [40.12371329614,122.05261230468],
    [40.101132537291,122.03475952148],
    [40.080120449822,122.02514648437],
    [40.063306109677,122.01484680175],
    [40.039653921226,122.0079803466],
    [40.021252100485,122.00248718261],
    [40.009682700794,121.98738098144],
    [39.983381316865,121.98394775390],
    [39.969700594202,121.98806762695],
    [39.956017132934,121.98463439941],
    [39.941278035289,121.97364807128],
    [39.90230942007,121.95579528808],
    [39.884397485996,121.94755554199],
    [39.867534919315,121.93176269531],
    [39.852249637259,121.93176269531],
    [39.844342120956,121.91940307617],
    [39.815340102443,121.90704345703],
    [39.793712450783,121.88713073730],
    [39.765216871405,121.88644409179],
    [39.750964657325,121.87545776367],
    [39.691284504667,121.85623168945],
    [39.676488518574,121.85485839843],
    [39.665389448543,121.84593200683],
    [39.611983298338,121.82807922363],
    [39.591879219845,121.83151245117],
    [39.567005576547,121.82739257812],
    [39.545300002515,121.81571960449],
    [39.526235850096,121.80335998535],
    [39.500279008119,121.80953979492],
    [39.458939949716,121.81091308593],
    [39.425532776321,121.81159973144],
    [39.401130116529,121.82670593261],
    [39.335837580668,121.82464599609],
    [39.30874716403,121.81503295898],
    [39.297589237127,121.8164062],
    [39.289618200363,121.79718017578],
    [39.256129937496,121.77932739257],
    [39.225285324776,121.74980163574],
    [39.173137752815,121.74499511718],
    [39.137996150141,121.70242309570],
    [39.126811050751,121.69486999511],
    [39.106034010319,121.69281005859],
    [39.085250843777,121.67083740234],
    [39.069792723552,121.65092468261],
    [39.06339526944,121.63993835449],
    [39.032999444901,121.63650512695],
    [39.018063372109,121.61384582519],
    [39.010594152317,121.60079956054]];

    var lineGlatLngs = [];
    var startGlatLon = [];
    var end = null;
    var count = 0;

    for (var pi = 0; pi < points.length; pi++) {
    var point = points[pi];
    if (count > 0 && lineGlatLngs.length == 0) {
    lineGlatLngs.push(startGlatLon);
    }

    var gp = new GLatLng(point[0], point[1]);
    lineGlatLngs.push(gp);
    if ((pi + 1) % 5 == 0) {
    count++;
    var polyline = new GPolyline(lineGlatLngs, colors[count % 3], 5, 0.8);
    map.addOverlay(polyline);
    bindEvent(polyline);
    startGlatLon = gp;
    lineGlatLngs = [];
    }
    }


    for (var mi = 0; mi < mpoints.length; mi++) {
    var pp = mpoints[mi];
    //alert(p);
    var latlng = new GLatLng(pp[0], pp[1]);
    var marker = new GMarker(latlng);
    map.addOverlay(marker);
    bindMarkerEvent(marker);
    }


    }
    }

    var str ="交通事故位置";

    function bindMarkerEvent(marker) {
    var html = '';
    html += '<table style="width:110">';
    html += '<tr><td align=left nowrap>'+str+': ' + marker.getLatLng().toUrlValue() + '</td></tr>';
    html += '<tr><td align=left nowrap>'+"事发时间"+': ' + new Date().toLocaleString() + '</td></tr>';
    html += '<tr><td align=left nowrap>'+"预计结束时间"+': ' + new Date(2009,11,12).toLocaleString() + '</td></tr>';
    html += '</table>';

    GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindow(html);
    //alert(polyline.getVertex(1));
    });



    }

    function bindEvent(polyline) {
    var html = '';
    html += '<table style="width:110">';
    html += '<tr><td align=left nowrap>流量: ' + polyline.getVertex(1).lat() + '</td></tr>';
    html += '</table>';
    GEvent.addListener(polyline, 'click', function() {
    map.openInfoWindow(polyline.getVertex(1), html);
    //alert(polyline.getVertex(1));
    });
    }


    //]]>

    </script>

</head>

<body onload="load();" onunload="GUnload()">

<div id="spinner" class="spinner" style="display: none;"><img
        src="/gts/images/spinner.gif" alt="Spinner"/></div>
<div class="logo"><img src="/gts/images/grails_logo.jpg"
        alt="Grails"/></div>

<div id="map" style="width: 800px; height: 600px; float: left;"></div>

<div id="out">

</div>

</body>
</html>